<script setup lang="ts">
import { NButton, NDropdown } from 'naive-ui';
import { computed } from 'vue';

const themeStore = useThemeStore();

// 主题模式选项
const themeOptions = [
  {
    label: '浅色模式',
    key: 'light',
    icon: 'i-carbon-sun',
  },
  {
    label: '深色模式',
    key: 'dark',
    icon: 'i-carbon-moon',
  },
  {
    label: '跟随系统',
    key: 'auto',
    icon: 'i-carbon-screen',
  },
];

// 当前主题图标
const currentThemeIcon = computed(() => {
  if (themeStore.themeMode === 'auto') {
    return 'i-carbon-screen';
  }
  return themeStore.isDark ? 'i-carbon-moon' : 'i-carbon-sun';
});

// 处理主题切换
function handleThemeChange(key: string) {
  themeStore.setThemeMode(key as 'light' | 'dark' | 'auto');
}
</script>

<template>
  <div>
    <NDropdown
      trigger="click"
      :options="themeOptions"
      @select="handleThemeChange"
    >
      <NButton text>
        <div class="flex items-center">
          <div class="w-5 h-5" :class="[currentThemeIcon]" />
        </div>
      </NButton>
    </NDropdown>
  </div>
</template>
